<!--添加修改角色信息-->
<template>
    <a-modal v-model="showAddTable" :mask-closable="false" :closable="false" :width="900"
             :title="title ? '竞赛新增' : '竞赛编辑'"
             :maskClosable="false"
             :destroyOnClose="true">
        <a-form :form="form" @keydown.native.enter.prevent="saveApply" class="modelSearch">
            <a-form-item label="竞赛名称：" prop="name" v-bind="formStyle">
                <a-input
                        placeholder="请输入竞赛名称" ref="re"
                        v-decorator="[
                        'name',
                        {
                            rules: [
                                { required: true, message: '请输入汉字、字母、数字、_或-字符' },
                                { validator: this.verify.validateName.bind(this) }
                            ],
                            getValueFromEvent: event => {
                                return this.verify.formalSpace(event)
                            }
                        }
                    ]"
                />
            </a-form-item>
          <a-form-item label="负责人：" prop="head" v-bind="formStyle">
            <a-input
                placeholder="请输入负责人" ref="re"
                v-decorator="[
                        'head',
                        {
                            rules: [
                               { required: true, message: '请输入汉字、字母、数字、_或-字符' },
                                { validator: this.verify.validateName.bind(this) }
                            ],
                            getValueFromEvent: event => {
                                return this.verify.formalSpace(event)
                            }
                        }
                    ]"
            />
          </a-form-item>
          <a-form-item label="举办地点：" prop="address" v-bind="formStyle">
            <a-input
                placeholder="请输入举办地点类" ref="re"
                v-decorator="[
                        'address',
                        {
                            rules: [
                                { required: true, message: '请输入汉字、字母、数字、_或-字符' },
                                { validator: this.verify.validateName.bind(this) }
                            ],
                            getValueFromEvent: event => {
                                return this.verify.formalSpace(event)
                            }
                        }
                    ]"
            />
          </a-form-item>
          <a-form-item label="举办单位：" prop="organizer" v-bind="formStyle">
            <a-input
                placeholder="请输入举办单位" ref="re"
                v-decorator="[
                        'organizer',
                        {
                            rules: [
                                { required: true, message: '请输入汉字、字母、数字、_或-字符' },
                                { validator: this.verify.validateName.bind(this) }
                            ],
                            getValueFromEvent: event => {
                                return this.verify.formalSpace(event)
                            }
                        }
                    ]"
            />
          </a-form-item>
          <a-form-item label="竞赛起止时间：" prop="limited" v-bind="formStyle">
            <a-date-picker
                showTime
                :disabledDate="disabledStartDate"
                format="YYYY-MM-DD HH:mm:ss"
                v-model="startTime"
                placeholder="申请开始时间"
                style="width: 250px; float: left"
                v-decorator="[
                        'startTime',
                        {
                            rules: [
                                { required: true, message: '请选择开始时间' },
                            ]
                        }
                    ]"
            />
            <span style="width: 50px; text-align: center; margin-left: 20px">至</span>
            <a-date-picker
                showTime
                :disabledDate="disabledEndDate"
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="申请结束时间"
                v-model="endTime"
                style="width: 250px; float: right"
                v-decorator="[
                        'endTime',
                        {
                            rules: [
                                { required: true, message: '请选择结束时间' },
                            ]
                        }
                    ]"
            />
          </a-form-item>
          <a-form-item v-bind="formStyle" label="状态" required>
            <a-radio-group  v-model="state"
                            v-decorator="[
                        'state',
                        {
                            rules: [
                                { required: true,message: '状态不可为空'},
                            ],
                            getValueFromEvent: event => {
                                return this.verify.formalSpace(event)
                            }
                        }
                    ]"
            >
              <a-radio value="0">未开始</a-radio>
              <a-radio value="1">进行中</a-radio>
              <a-radio value="2">已结束</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="竞赛说明：" prop="description" v-bind="formStyle">
            <a-textarea
                placeholder="请输入竞赛说明" ref="re"
                v-decorator="[
                        'description',
                        {
                            rules: [
                                { required: true, message: '请输入汉字、字母、数字、_或-字符' },
                                { validator: this.verify.validateHundredName.bind(this) }
                            ],
                            getValueFromEvent: event => {
                                return this.verify.formalSpace(event)
                            }
                        }
                    ]"
            />
          </a-form-item>
        </a-form>
        <div slot="footer">
            <a-button type="default" size="default" @click="cancelApply()">取消</a-button>
            <a-button type="primary" size="default" @click="saveApply()">确定</a-button>
        </div>
    </a-modal>
</template>

<script>
    import verify from 'libs/verify'
    import AFormItem from 'ant-design-vue/es/form/FormItem'
    import moment from 'moment'
    export default {
        name: 'addEdit',
        components: {
            AFormItem,
        },
        data () {
            return {
                verify,
                form: this.$form.createForm(this),
                showAddTable: false,
                input: false,
              state: '',
              startTime: "",
              endTime: "",
            }
        },
        computed: {
            formStyle() {
                return this.$store.state.common.formStyle
            }
        },
        props: {

            title: {
                type: Boolean,
                required: true
            },
          objDTO:{
            type: Object,
            required: true
          }
        },
        watch: {

        },
        methods: {
          /**
           * Function    : disabledStartDate
           * Description : 对结束时间进行限制
           * Input       : startValue
           * Return      : None
           */
          disabledStartDate ( startValue ) {
            return startValue && startValue < moment().subtract(1, 'days')
          },
          /**
           * Function    : disabledEndDate
           * Description : 对结束时间进行限制
           * Input       : endValue
           * Return      : None
           */
          disabledEndDate ( endValue ) {
            const startTime = this.startTime
            if (startTime) {
              return startTime.valueOf () >= endValue.valueOf ()
            }
            return (
                endValue && endValue < moment().subtract(1, 'days')
            )
          },
            /**
             * Function    : saveApply
             * Description : 打开弹框
             * Input       : none
             * Return      : none
             */
            showModal () {
                this.showAddTable = true
            },
            /**
             * Function    : showEdit
             * Description : 编辑时显示
             * Input       : opt单个所有数据
             * Return      : none
             */
            showEdit ( opt ) {
                this.showAddTable = true
                this.id = opt.recordId
              this.startTime = moment(opt.startTime).format("YYYY-MM-DD HH:mm:ss")
              this.endTime = moment(opt.endTime).format("YYYY-MM-DD HH:mm:ss")
                this.$nextTick (() => {
                    this.form.setFieldsValue (this.$pick (opt, [ 'name', 'description', 'address','organizer','head','state' ]))
                })
            },

            /**
             * Function    : saveApply
             * Description : 角色信息新增、编辑保存
             * Input       : name
             * Return      : none
             */
            saveApply ( ) {
                this.form.validateFields((err, value) => {
                    if (!err) {
                        let para = {}
                        para.name = value.name
                        para.description = value.description
                        para.address = value.address
                        para.organizer = value.organizer
                        para.head = value.head
                        para.state = value.state
                        para.startTime = moment(this.startTime).format("YYYY-MM-DD HH:mm:ss")
                        para.endTime = moment(this.endTime).format("YYYY-MM-DD HH:mm:ss")
                      if (!this.title){
                        para.recordId = this.id
                      }
                      this.$store.dispatch ('saveCompetitionAct', para).then (response => {
                          this.showAddTable = false
                          if (response.code === 0) {
                              this.$emit ('init')
                              this.$message.success (response.message)
                          } else {
                              this.$message.error (response.message)
                          }
                      })
                    }
                })
            },

            /**
             * Function    : cancelApply
             * Description : 取消弹出框
             * Input       : val
             * Return      : none
             */
            cancelApply ( ) {
                this.showAddTable = false
                let _this = this
              _this.startTime = ""
              _this.endTime = ""
                setTimeout(function() {
                    _this.form.resetFields()
                }, 100)
            },


        },

        created () {

        }
    }
</script>
